<script setup lang="ts">
    import { ref } from "vue";
    import { reqGetUserInfo } from "@/api/user";
    import io from "socket.io-client";
    import { Toast } from "vant";
    import { nextTick } from "vue";
    import useStore from "@/store";
    //! 获取初始数据 ===================================================================
    const userInfo = ref({
        birthday: "",
        gender: 0,
        id: "",
        mobile: "",
        photo: "",
        name: "",
        intro: "",
    });
    async function getUserInfo() {
        const res = await reqGetUserInfo();
        userInfo.value = res.data.data;
    }
    getUserInfo();
    //* 聊天主体区域==========================================================================
    const word = ref("");
    const listRef = ref();
    const list = ref([
        {
            name: "aili",
            msg: "世贤，我的睡衣好看吗 ？",
            timestamp: Date.now(),
        },
        { name: "me", msg: "你怎么穿品如的衣服 ？！", timestamp: Date.now() },
        {
            name: "aili",
            msg: "既然要追求刺激，那就贯彻到底咯 ！",
            timestamp: Date.now(),
        },
        {
            name: "me",
            msg: "66666666",
            timestamp: Date.now(),
        },
    ]);
    //! socket 通讯===========================================================
    let socket = io();
    function initSocket() {
        const { user } = useStore();
        //实例化请求时必须要传token
        socket = io("http://toutiao.itheima.net", {
            query: {
                token: user.tokenInfo.token,
            },
            transports: ["websocket"],
        });
        socket.on("connect", () => {
            Toast.success("连接成功");
        });
        socket.on("message", ({ msg, timestamp }) => {
            list.value.push({
                name: "aili",
                msg: msg,
                timestamp,
            });
            nextTick(() => {
                listRef.value.scrollTop = listRef.value.scrollHeight;
            });
        });
    }

    initSocket();
    //!发送===============================================================
    const send = () => {
        if (word.value.trim() === "") return Toast.fail("内容不能为空");
        socket.emit("message", {
            msg: word,
            timestamp: Date.now(),
        });
        list.value.push({
            name: "me",
            msg: word.value,
            timestamp: Date.now(),
        });
        nextTick(() => {
            listRef.value.scrollTop = listRef.value.scrollHeight;
        });
        word.value = "";
    };
</script>
<template>
    <div class="container">
        <!-- 固定导航 -->
        <van-nav-bar
            fixed
            left-arrow
            @click-left="$router.back()"
            title="洪世贤的小宝贝：艾莉"></van-nav-bar>

        <!-- 聊天主体区域 -->
        <div class="chat-list" ref="listRef">
            <!-- 左侧是机器人小智 -->
            <div
                class="chat-item"
                :class="item.name === 'aili' ? 'left' : 'right'"
                v-for="(item, index) in list"
                :key="index">
                <div v-if="item.name === 'aili'">
                    <van-image
                        fit="cover"
                        round
                        src="https://img1.baidu.com/it/u=2239934952,538997047&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=479" />
                    <div class="chat-pao">{{ item.msg }}</div>
                </div>

                <!-- 右侧是当前用户 -->
                <div v-else>
                    <div class="chat-me">{{ item.msg }}</div>
                    <van-image
                        fit="cover"
                        round
                        src="https://img0.baidu.com/it/u=2103337782,1812971363&fm=253&fmt=auto&app=138&f=JPEG?w=561&h=500" />
                </div>
            </div>
        </div>

        <!-- 对话区域 -->
        <div class="reply-container van-hairline--top">
            <van-field
                @keyup.enter="send"
                v-model="word"
                placeholder="说点什么...">
                <template #button>
                    <van-button
                        style="font-size: 20px; color: #fff; width: 40px"
                        @click="send"
                        size="small"
                        type="success"
                        ><van-icon name="guide-o"
                    /></van-button>
                </template>
            </van-field>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    .container {
        height: 100%;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        background: #fafafa;
        padding: 46px 0 50px 0;
        .chat-list {
            height: 100%;
            overflow-y: scroll;
            .chat-item {
                padding: 10px;
                .van-image {
                    vertical-align: top;
                    width: 40px;
                    height: 40px;
                }
                .chat-pao {
                    vertical-align: top;
                    display: inline-block;
                    min-width: 10px;
                    max-width: 70%;
                    min-height: 40px;
                    line-height: 38px;
                    border: 0.5px solid #c2d9ea;
                    border-radius: 4px;
                    position: relative;
                    padding: 0 10px;
                    background-color: #e0effb;
                    word-break: break-all;
                    font-size: 14px;
                    color: #333;
                    &::before {
                        content: "";
                        width: 10px;
                        height: 10px;
                        position: absolute;
                        top: 12px;
                        border-top: 0.5px solid #c2d9ea;
                        border-right: 0.5px solid #c2d9ea;
                        background: #e0effb;
                    }
                }
                .chat-me {
                    vertical-align: top;
                    display: inline-block;
                    min-width: 10px;
                    max-width: 70%;
                    min-height: 40px;
                    line-height: 38px;
                    border: 0.5px solid #c2d9ea;
                    border-radius: 4px;
                    position: relative;
                    padding: 0 10px;
                    background-color: #85ec49;
                    word-break: break-all;
                    font-size: 14px;
                    color: #333;
                    &::before {
                        content: "";
                        width: 10px;
                        height: 10px;
                        position: absolute;
                        top: 12px;
                        border-top: 0.5px solid #c2d9ea;
                        border-right: 0.5px solid #c2d9ea;
                        background: #85ec49;
                    }
                }
            }
        }
    }
    .chat-item.right {
        text-align: right;
        .chat-pao {
            margin-left: 0;
            margin-right: 15px;
            &::before {
                right: -6px;
                transform: rotate(45deg);
            }
        }
        .chat-me {
            margin-left: 0;
            margin-right: 15px;
            &::before {
                right: -6px;
                transform: rotate(45deg);
            }
        }
    }
    .chat-item.left {
        text-align: left;
        .chat-pao {
            margin-left: 15px;
            margin-right: 0;
            &::before {
                left: -5px;
                transform: rotate(-135deg);
            }
        }
        .chat-me {
            margin-left: 15px;
            margin-right: 0;
            &::before {
                left: -5px;
                transform: rotate(-135deg);
            }
        }
    }
    .reply-container {
        position: fixed;
        left: 0;
        bottom: 0;
        height: 44px;
        width: 100%;
        background: #f5f5f5;
        z-index: 9999;
    }
</style>
